<template>
  <div class="common-layout">
    <el-container class="root-container">
      <el-header class="header">
        <AdminHeader></AdminHeader>
      </el-header>
      <el-container class="main-container">
        <el-aside class="aside">
          <AdminAside></AdminAside>
        </el-aside>
        <el-main class="main">
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import AdminHeader from '../components/AdminHeader.vue'
import AdminAside from '../components/AdminAside.vue'
import BannerPage from './BannerPage.vue'
import MenuList from './MenuList.vue'
import EditorPage from './EditorPage.vue'
import EchartsPage from './EchartsPage.vue'
export default {
  components: {
    AdminHeader,
    AdminAside,
    BannerPage,
    MenuList,
    EditorPage,
    EchartsPage
  },
  created() {
    // 在哪里显示。就在哪里引入组件
    // const token = localStorage.getItem('token')
    // const adminname = localStorage.getItem('admin')

    // // 当 localstorage 里没有 token 或者 adminname 时，
    // // 自动跳转到 登录页
    // if (!token || !adminname) {
    //   this.$router.push('/login')
    // }
  }
}
</script>
<style scoped>
.root-container {
  /** 
    layout元素，首先要把 容器 的高度撑开
    撑满页面
  */
  height: 100vh;
}
.header {
  /** 去掉默认高度，业务需要根据实际内容撑开 */
  height: unset;
  padding: 0;
}
.main-container {
  border: 1px solid tomato;
}
.main {
  border: 1px solid yellowgreen;
}
.aside {
  width: unset;
}
</style>